import EchartsComponent, { MyChartOption } from '@/components/EchartsComponent';
import { getEmptyOptions } from '@/dictionary';
import { getYaxisOptions } from '@/pages/Statistics/Net/CommonMap';
import ChartForm from '@/pages/Statistics/Net/components/ChartForm';
import { statisticPocEnergyV1ControllerAnnualGraphReport } from '@/services/ess/statisticPocEnergy';
import { useModel } from '@@/exports';
import { Spin } from 'antd';
import dayjs, { Dayjs } from 'dayjs';
import React, { useEffect, useRef, useState } from 'react';

const YearChart: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const chartRef = useRef(null);
  const [chartLoading, setChartLoading] = useState(false);
  const [options, setOptions] = useState<MyChartOption>({});
  /**
   * 获得报表图
   * @param options
   */
  const handleSetOption = (options) => {
    if (options?.xaxis) {
      const chartOption = {
        xAxis: {
          type: 'category',
          data: options.xaxis,
          axisTick: {
            alignWithLabel: true,
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          show: true,
          right: 0,
          icon: 'rect',
        },
        yAxis: {
          type: 'value',
        },
        graphic: [
          {
            type: 'image',
            invisible: true,
          },
          {
            type: 'text',
            invisible: true,
          },
        ],
        series: getYaxisOptions(options.yaxis),
      };
      chartRef?.current?.instance().clear();
      setOptions(chartOption);
      setChartLoading(false);
    } else {
      if (
        chartRef?.current?.instance() &&
        chartRef?.current?.instance().getOption()?.series.length !== 0
      ) {
        chartRef?.current?.instance().clear();
      }
      setOptions(getEmptyOptions());
      setChartLoading(false);
    }
  };
  type submitType = {
    date: Dayjs;
    areaIdList: number[] | string[] | undefined;
  };
  const handleSubmit = (val: submitType) => {
    setChartLoading(true);
    statisticPocEnergyV1ControllerAnnualGraphReport({
      stationId: initialState?.stationId,
      date: dayjs(val.date).format('YYYY'),
      areaIdList: val.areaIdList,
    })
      .then((res) => {
        if (res.success) {
          handleSetOption(res?.data);
        } else {
          setOptions(getEmptyOptions());
          setChartLoading(false);
        }
      })
      .catch(() => {
        setChartLoading(false);
      });
  };
  useEffect(() => {
    setChartLoading(true);
    statisticPocEnergyV1ControllerAnnualGraphReport({
      stationId: initialState?.stationId,
      date: dayjs().format('YYYY'),
      areaIdList: null,
    })
      .then((res) => {
        if (res.success) {
          handleSetOption(res?.data);
        } else {
          setOptions(getEmptyOptions());
          setChartLoading(false);
        }
      })
      .catch(() => {
        setChartLoading(false);
      });
  }, []);
  return (
    <div>
      <ChartForm dateType={'year'} handleSubmit={handleSubmit} />
      <Spin spinning={chartLoading}>
        <EchartsComponent
          ref={chartRef}
          option={options}
          width={'auto'}
          height={530}
        ></EchartsComponent>
      </Spin>
    </div>
  );
};

export default YearChart;
